<template>
	<div>
		<el-aside width="300px" class="el-aside-custom" >
			<p style="font-size:28px" v-if="user===''">欢迎, 用户123 </p>
			<p style="font-size:28px" v-else>欢迎, 用户{{ user.username }} </p>
			<p style="font-size:36px">您想去哪儿？</p>
		</el-aside>


		<div class="container">
			<headers></headers>
			<br/><br/><br/>
			<div v-for="work in works" :key="work.workId" class="work-item" >
				<button @click="toDetail(work.workId)" class="work-button">
					<img :src="work.coverLink" alt="Cover Image" class="work-image" />
					<p class="work-name">{{ work.workName }}</p>
				</button>
			</div>
		</div>
	</div>
</template>

<script>
import axios from "axios";
import router from '../router';
import Headers from '../components/Headers.vue';
import {useUserInfoStore} from '../stores/userInfo'
  const userInfoStore=useUserInfoStore()

export default {
  components: { Headers },
	name: "HomePage",
	data() {
		return {
			works: [],
			user:userInfoStore.user
		};
	},
	created() {
		this.fetchImages();
	},
	methods: {
		async fetchImages() {
			try {
				const response = await axios.get(
					"http://121.41.171.56:2003/work/0/10"
				);
				this.works = response.data.data; // 获取前10张图片
			} catch (error) {
				console.error("Error fetching images:", error);
			}
		},
		toDetail(hid){
			router.push({name:"publics",query:{hid}},'_blank');
		}
	}
};
</script>

<style scoped>
.container {
	display: flex; /* 使用 flex 布局 */
	flex-direction: column; /* 列排列 */
	align-items: center; /* 水平居中 */
	background-color: rgba(60, 60, 60, 1);
}

.work-item {
	position: relative; /* 相对定位的容器 */
	text-align: center; /* 文字居中 */
	margin-bottom: 20px; /* 图片间距 */
}

.work-image {
	width: 897px;
	height: 504px;
	border-radius: 40px;
	object-fit: cover;
}

.work-name {
	position: absolute; /* 绝对定位 */
	color: white;
	top: 19px; /* 顶端对齐 */
	left: 38px; /* 左对齐 */
	font-size: 24px;
	margin: 0 20px 20px 20px; /* 调整边距 */
}

.background {
	color: rgba(60, 60, 60, 1);
}

.work-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.el-aside-custom {
  position: absolute; /* 使用绝对定位 */
  top: 80px; /* 距离顶部 80px */
  left: 30px; /* 距离左边框 30px */
  z-index: 1000; /* 设置一个较高的 z-index 值，确保在其他元素上方 */
  color:white;
}
</style>
